<template>
  <div class="activity-center-view">
    <h2>活动中心</h2>
    <div class="activity-center-content">
      <div class="activity-filter">
        <select v-model="filterStatus">
          <option value="upcoming">即将开始</option>
          <option value="ongoing">进行中</option>
          <option value="past">已结束</option>
        </select>
        <select v-model="filterType">
          <option value="all">所有类型</option>
          <option value="lecture">讲座</option>
          <option value="competition">比赛</option>
          <option value="workshop"> workshop</option>
          <option value="party">聚会</option>
        </select>
      </div>
      <div class="activity-list">
        <div class="activity-item" v-for="activity in filteredActivities" :key="activity.id">
          <div class="activity-date">
            <div class="date-number">{{ activity.date.split('-')[2] }}</div>
            <div class="date-month">{{ activity.date.split('-')[1] }}月</div>
          </div>
          <div class="activity-info">
            <h3>{{ activity.name }}</h3>
            <p class="activity-time">{{ activity.time }}</p>
            <p class="activity-location">{{ activity.location }}</p>
            <p class="activity-organizer">主办方: {{ activity.organizer }}</p>
            <p class="activity-description">{{ activity.description }}</p>
          </div>
          <button class="register-btn" :disabled="activity.status === 'past'">
            {{ activity.status === 'past' ? '已结束' : '立即报名' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟活动数据
const activities = ref([
  { id: 1, name: '编程马拉松', type: 'competition', date: '2024-12-15', time: '09:00-17:00', location: '教学楼A座', organizer: '编程社团', description: '24小时编程比赛', status: 'upcoming' },
  { id: 2, name: '篮球友谊赛', type: 'competition', date: '2024-11-30', time: '14:00-16:00', location: '体育馆', organizer: '篮球社团', description: '与其他学校的篮球友谊赛', status: 'upcoming' },
  { id: 3, name: '书法讲座', type: 'lecture', date: '2024-11-25', time: '19:00-21:00', location: '图书馆报告厅', organizer: '书法社团', description: '邀请知名书法家讲解书法技巧', status: 'ongoing' },
  { id: 4, name: '机器人制作 workshop', type: 'workshop', date: '2024-11-20', time: '10:00-12:00', location: '实验楼B座', organizer: '机器人社团', description: '学习机器人制作基础知识', status: 'past' },
  { id: 5, name: '音乐晚会', type: 'party', date: '2024-12-20', time: '18:30-21:00', location: '学生活动中心', organizer: '音乐社团', description: '年度音乐晚会', status: 'upcoming' },
  { id: 6, name: '数学建模培训', type: 'workshop', date: '2024-11-15', time: '14:30-16:30', location: '教学楼B座', organizer: '数学建模社团', description: '数学建模竞赛培训', status: 'past' },
])

const filterStatus = ref('upcoming')
const filterType = ref('all')

const filteredActivities = computed(() => {
  return activities.value.filter(activity => {
    const matchesStatus = filterStatus.value === 'all' || activity.status === filterStatus.value
    const matchesType = filterType.value === 'all' || activity.type === filterType.value
    return matchesStatus && matchesType
  })
})
</script>

<style scoped>
.activity-center-view {
  width: 100%;
  height: 100%;
}

.activity-center-content {
  padding: 24px;
}

.activity-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.activity-filter select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background-color: #1890ff;
  color: white;
  border-radius: 8px;
  min-width: 80px;
}

.date-number {
  font-size: 24px;
  font-weight: bold;
}

.date-month {
  font-size: 14px;
}

.activity-info h3 {
  margin-bottom: 8px;
  color: #333;
}

.activity-time,
.activity-location,
.activity-organizer {
  margin-bottom: 4px;
  color: #666;
  font-size: 14px;
}

.activity-description {
  margin-top: 8px;
  color: #999;
  line-height: 1.4;
}

.register-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-left: auto;
}

.register-btn:hover:not(:disabled) {
  background-color: #40a9ff;
}

.register-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .activity-item {
    flex-direction: column;
  }
  
  .register-btn {
    margin-left: 0;
    align-self: flex-start;
  }
}
</style>